import {
  createStore,
  PluginFunctions,
  PluginOnDocumentLoad,
  ViewerState,
  Plugin,
} from "../../core";

import ThumbnailListWithStore from "./ThumbnailListWithStore";
import StoreProps from "./StoreProps";
import { ReactElement, useMemo } from "react";

interface ThumbnailPlugin extends Plugin {
  Thumbnails: () => ReactElement;
}

const thumbnailPlugin = (): ThumbnailPlugin => {
  const store = useMemo(() => createStore<StoreProps>({}), []);

  const ThumbnailsDecorator = () => <ThumbnailListWithStore store={store} />;

  return {
    install: (pluginFunctions: PluginFunctions) => {
      store.update("jumpToPage", pluginFunctions.jumpToPage);
    },
    onDocumentLoad: (props: PluginOnDocumentLoad) => {
      store.update("doc", props.doc);
    },
    onViewerStateChange: (viewerState: ViewerState) => {
      store.update("currentPage", viewerState.pageIndex);
      store.update("pageHeight", viewerState.pageHeight);
      store.update("pageWidth", viewerState.pageWidth);
      return viewerState;
    },
    Thumbnails: ThumbnailsDecorator,
  };
};

export default thumbnailPlugin;
